<template>
  <div class="apply-settle">
    <el-row class="info-div" style="padding:40px">
      <el-row align="middle" justify="center" type="flex">
        <el-col align="middle" justify="center" type="flex" class="sub-title">
          即将为您前往认证，需要您提交一定的信息
        </el-col>
      </el-row>
<!--      <el-steps :active="step - 1" finish-status="success" style="padding:20px 50px 0 50px">-->
<!--        <el-step title="个人信息" icon="el-icon-edit-outline"></el-step>-->
<!--        <el-step title="学术成果" icon="el-icon-folder-add"></el-step>-->
<!--        <el-step title="完成" icon="el-icon-success"></el-step>-->
<!--      </el-steps>-->

      <el-divider/>

      <el-row align="middle" justify="center" type="flex">
        <el-col align="left" style="padding: 0 50px 0 50px;">
          <!--第一步-->
          <el-row :hidden="step !== 1" style="font-size: large; width:80%;">
            <el-row class="fill-in-row">
              <el-col :span="7" class="sub-title">
                真实姓名
              </el-col>
              <el-col :span="17">
                <el-input v-model="applyInfo.author_name" placeholder="请输入您的真实姓名"></el-input>
              </el-col>
            </el-row>
            <el-row class="fill-in-row">
              <el-col :span="7" class="sub-title">
                工作机构
              </el-col>
              <el-col :span="17">
                <el-input v-model="applyInfo.affiliation_name" placeholder="请输入您要认证的机构名称"></el-input>
              </el-col>
            </el-row>

            <el-row class="fill-in-row">
              <el-col :span="7" class="sub-title">
                邮箱
              </el-col>
              <el-col :span="17">
                <el-input v-model="applyInfo.work_email" placeholder="请输入您的邮箱地址"></el-input>
              </el-col>
            </el-row>

            <el-row class="fill-in-row">
              <el-col :span="7" class="sub-title">
                个人简介（可选）
              </el-col>
              <el-col :span="17">
                <el-input v-model="applyInfo.fields" placeholder="可简要介绍您的研究方向等"></el-input>
              </el-col>
            </el-row>

            <el-row class="fill-in-row">
              <el-col :span="7" class="sub-title">
                个人网站（可选）
              </el-col>
              <el-col :span="17">
                <el-input v-model="applyInfo.home_page" placeholder=""></el-input>
              </el-col>
            </el-row>
            <el-button style="margin-top: 20px; margin-left: 450px" type="success" @click="submit_info" icon="el-icon-circle-check">提交认证</el-button>
          </el-row>
          <!--  第一步结束    -->

          <!--      第二步开始-->
<!--          <el-row :hidden="step !== 2">-->
<!--            <el-row justify="space-around" style="padding-bottom: 10px; width: 100%; " type="flex">-->
<!--              <el-col style="text-align: left">已根据您的姓名，检索出 <span-->
<!--                  style="font-weight: 600; color: #217ad9; font-size: x-large; ">{{ author_count }}</span>-->
<!--                个文章组，请选择：-->
<!--              </el-col>-->
<!--              <el-col>-->
<!--                <el-row justify="end" style="padding-right: 5px;" type="flex">-->
<!--                  <el-button type="primary" @click="confirm_choice"> 确认</el-button>-->
<!--                </el-row>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-collapse v-model="opened_collapse" class="papers-collapse" accordion>-->
<!--                <el-collapse-item v-for="(papers, index) in authors" :key="index"-->
<!--                                  :name="papers.author_id">-->
<!--                  <template slot="title">-->
<!--                    <el-checkbox v-model="papers_group_state[index].selected" class="choose-paper-checkbox"-->
<!--                                 style="padding-left: 20px">-->
<!--                      <span style="font-size: 17px;margin: 10px;font-weight: bold; color: #2f2e2e"-->
<!--                            v-bind="papers_group_state[index].selected">-->
<!--                      {{ papers.name }}-->
<!--                      </span>-->
<!--                    </el-checkbox>-->
<!--                  </template>-->
<!--                  <div v-for="(item, index) in papers.papers" v-bind:key="index" class="article-item" style="margin-left: 60px; margin-top: 10px; color: grey;">-->
<!--                    <div v-if="index<6" style="text-align: left">-->
<!--                      <div style="margin-bottom: 5px">-->
<!--                        <span class="paper-title"-->
<!--                              style="font-size: 16px; font-family:'Times Roman',sans-serif ;color: rgba(53,53,53,0.94)"-->
<!--                              @click="gotoArticle(item.paper_id)">-->
<!--                          {{ index+1 }}. {{ item.paper_title }}</span>-->
<!--                      </div>-->
<!--                      <span v-for="(j, index) in item.authors" :key="j">-->
<!--                        {{ j.author_name }}-->
<!--                        <span v-if="index<item.authors.length-1"> / </span>-->
<!--                      </span>-->
<!--                      <span> · {{ item.year }}</span>-->
<!--                      <span> · {{ item.publisher }} </span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div-->
<!--                      v-if="papers.papers.length>6"-->
<!--                      style="margin-left: 60px; margin-top: 10px; color: grey; text-align: left; color: rgba(53,53,53,0.94)"-->
<!--                      class="paper-title">-->
<!--                    ···-->
<!--                  </div>-->
<!--                </el-collapse-item>-->
<!--              </el-collapse>-->
<!--              <scroll-loader :loader-method="getArticlesByAuthor" :loader-disable="loadMoreDisable"></scroll-loader>-->
<!--            </el-row>-->
<!--          </el-row>-->
          <!--      第二部结束-->

          <!--step 3 start -->
<!--          <el-row :hidden="step !== 3">-->
<!--            <el-col>-->
<!--              <el-result icon="success"  title="">-->
<!--                <template slot="title">-->
<!--                  <span style="font-size: large">欢迎入驻</span>-->
<!--                </template>-->
<!--                <template slot="subTitle">-->
<!--                  <span style="font-size: 16px">您的申请将在3天内由管理员审核，请耐心等待</span>-->
<!--                </template>-->
<!--                <template slot="extra">-->
<!--                  <el-button type="primary" @click="gotoHome">返回</el-button>-->
<!--                </template>-->
<!--              </el-result>-->
<!--            </el-col>-->
<!--            &lt;!&ndash;step 3 ended&ndash;&gt;-->
<!--          </el-row>-->
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>

import qs from "qs";
import user from "../../store/user";

export default {
  name: "ApplySettle",
  data() {
    return {
      step: 1,
      applyInfo: {
        author_name: "",
        affiliation_name: "",
        work_email: "",
        fields: "",
        home_page: "",
        author_id: "",
      },
      papers_group_state: [
        {
          open: true,
          selected: false,
          author_id: "a123"
        },
        {
          open: true,
          selected: false,
          author_id: "a12acd3"
        }
      ],
      author_count: 10,
      authors: [
        // {
        //   author_id: "a123",
        //   name: "Li Yu",
        //   papers: [
        //     {
        //       "authors": [
        //         {
        //           "affiliation_id": "",
        //           "affiliation_name": "Independent Researcher",
        //           "author_id": "3192512793",
        //           "author_name": "Sergei Belousov",
        //           "order": "1"
        //         },
        //         {
        //           "affiliation_id": "",
        //           "affiliation_name": "Independent Researcher",
        //           "author_id": "3192512793",
        //           "author_name": "Sergei Belousov",
        //           "order": "1"
        //         }
        //       ],
        //       "book_title": "",
        //       "citation_count": "0",
        //       "citation_msg": [],
        //       "conference": "",
        //       "conference_id": "",
        //       "date": "2021-11-01",
        //       "doctype": "",
        //       "doi": "10.1016/J.SIMPA.2021.100115",
        //       "doi_url": "https://dx.doi.org/10.1016/J.SIMPA.2021.100115 Add to Citavi project by DOI",
        //       "fields": [],
        //       "first_page": "100115",
        //       "journal": "",
        //       "journal_id": "",
        //       "last_page": "",
        //       "paper_id": "3191610454",
        //       "paper_title": "mobilestylegan pytorch pytorch based toolkit to compress stylegan2 model",
        //       "publisher": "Elsevier BV",
        //       "rank": "23112",
        //       "reference_count": "12",
        //       "volume": "10",
        //       "year": "2021"
        //     },
        //     {
        //       "authors": [
        //         {
        //           "affiliation_id": "",
        //           "affiliation_name": "Independent Researcher",
        //           "author_id": "3192512793",
        //           "author_name": "Sergei Belousov",
        //           "order": "1"
        //         },
        //         {
        //           "affiliation_id": "",
        //           "affiliation_name": "Independent Researcher",
        //           "author_id": "3192512793",
        //           "author_name": "Sergei Belousov",
        //           "order": "1"
        //         }
        //       ],
        //       "book_title": "",
        //       "citation_count": "0",
        //       "citation_msg": [],
        //       "conference": "",
        //       "conference_id": "",
        //       "date": "2021-11-01",
        //       "doctype": "",
        //       "doi": "10.1016/J.SIMPA.2021.100115",
        //       "doi_url": "https://dx.doi.org/10.1016/J.SIMPA.2021.100115 Add to Citavi project by DOI",
        //       "fields": [],
        //       "first_page": "100115",
        //       "journal": "",
        //       "journal_id": "",
        //       "last_page": "",
        //       "paper_id": "3191610454",
        //       "paper_title": "mobilestylegan pytorch pytorch based toolkit to compress stylegan2 model",
        //       "publisher": "Elsevier BV",
        //       "rank": "23112",
        //       "reference_count": "12",
        //       "volume": "10",
        //       "year": "2021"
        //     }
        //   ]
        // },
      ],
      author_page_idx: 1,
      loadMoreDisable: true,
    }
  },
  watch: {
    authors(val) {
      this.loadMoreDisable = val.length >= this.author_count;
    },
  },
  computed: {
    opened_collapse: function () {
      return this.papers_group_state.filter((x) => x.open).map(x => x.author_id);
    }
  },
  created() {
    const userInfo = user.getters.getUser(user.state());

    // 若未检测到登录信息，则跳转登录界面
    /*if (!userInfo) {
      this.$message.warning("请先登录");
      setTimeout(() => {
        this.$router.push("/login");
      }, 1000);
    }*/
  },
  methods: {
    submit_info() {
      const user_id = localStorage.getItem("user_id");
      const affiliation = this.applyInfo.affiliation_name;
      console.log("userid : "+user_id);
      console.log("affiliation : "+affiliation);
      this.$axios({
        method:'post',
        url:'my_app1/authentication',
        data: qs.stringify({
          affiliation:affiliation,
          user_id:user_id
        }),
      }).then(res=>{
        console.log(res.data);
        if(res.data.error === '0'){
          this.$message.success(res.data.msg);
          this.$router.push('/schPortal');
        }
      })
    },
    confirm_choice() {
      const userInfo = user.getters.getUser(user.state());
      let userId = userInfo.user.userId;
      if (this.isStep2Valid()) {
        this.applyInfo['user_id'] = userId;
        this.apply();
      } else {
        this.$message.error("至少选择一个文献组！");
      }
    },
    apply() {
      // let _loadingIns = this.$loading({fullscreen: true, text: '正在提交申请！'});
      this.$axios({
        method: 'post',
        url: '/submit/create',
        data: qs.stringify(this.applyInfo)
      })
      .then(res => {
        // _loadingIns.close();
        switch (res.data.status) {
          case 200:
            this.step = 3;
            break;
          case 402:
            this.$userInvalid();
            break;
          case 404:
            this.$userNotFound();
            break;
          case 406:
            this.$message.warning("您已提交过认领申请！");
            break;
        }
      })
      .catch(err => {
        console.log(err);
      })
    },
    isStep1Valid() {
      return !(this.applyInfo.author_name === '' || this.applyInfo.affiliation_name === ''
          || this.applyInfo.work_email === '' || this.applyInfo.fields === '');
    },
    isStep2Valid() {
      for (let i = 0; i < this.papers_group_state.length; i++) {
        if (this.papers_group_state[i].selected === true) {
          this.applyInfo.author_id = this.papers_group_state[i].author_id;
          return true;
        }
      }
      return false;
    },
    gotoHome() {
      this.$router.push('/');
    },
    gotoArticle(paper_id) {
      let routeUrl = this.$router.resolve({
        path: '/article',
        query: { v: paper_id }
      });
      window.open(routeUrl .href, "_blank");
    },
    getArticlesByAuthor() {
      if (this.authors.length >= this.author_count) {
        this.loadMoreDisable = true;
        return;
      }

      let author_name = this.applyInfo.author_name;

      let _loadingIns;
      // if (this.step === 1)
      //   _loadingIns = this.$loading({fullscreen: true, text: '正在根据您的姓名获取文献组'});
      this.$axios({
        method: 'post',
        url: '/submit/get/papers',
        data: qs.stringify({
          author_name: author_name,
          page: this.author_page_idx,
          size: 6
        })
      })
      .then(res => {
        // if (this.step === 1) _loadingIns.close();
        switch (res.data.status) {
          case 200:
            this.authors = this.authors.concat(res.data.authors);
            this.author_page_idx += 1;
            this.author_count = res.data.author_count;
            if (this.authors.length >= this.author_count)
              this.loadMoreDisable = true;
            this.step = 2;
            // Init Selected
            this.papers_group_state = [];
            for (var i = 0; i < this.authors.length; i++) {
              this.papers_group_state.push({
                open: false,
                selected: false,
                author_id: this.authors[i].author_id
              })
            }
            this.papers_group_state[0].open = true;
            break;
        }
      })
      .catch(err => {
        console.log(err);
      })
    }
  }
}
</script>

<style scoped>
@import "../../styles/article.css";

.apply-settle .info-div {
  min-height: 500px;
  background-color: white;
  padding-top: 25px;
  padding-left: 45px;
  padding-bottom: 25px;
  margin-left: 170px;
  margin-top: 40px;
  width: 80%;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04)
}

.apply-settle .sub-title {
  font-size: 17px;
  font-weight: 600;
  margin-top: 8px;
}

.fill-in-row {
  padding: 10px;
  margin-bottom: 5px;
}


.article-blocks .article-item {
  margin-top: 20px;
  display: flex;
}

.article-blocks .article-item >>> .el-card__body {
  width: 100%;
  padding: 25px 30px 15px;
}

.article-blocks .article-item >>> .el-divider--horizontal {
  margin: 10px 0;
}

.choose-paper-checkbox >>> .el-checkbox__inner {
  width: 20px;
  height: 20px;
}

.choose-paper-checkbox >>> .el-checkbox__inner::after {

  height: 12px;
  left: 7px;
}


.choose-paper-checkbox >>> .el-checkbox__inner {
  width: 20px;
  height: 20px;
}


</style>
